<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :append-to-body="true"
    :lock-scroll="true"
    :class="{'global-mobile-dialog': showMobilePage}"
    class="batch-dialog edit-common-dialog-size"
  >
    <div class="content">
      如果系统检测到上传的资源已有关联供应商，那么将取消他们的关联，并关联到当前供应商下。
    </div>
    <div class="dialog-footer">
      <import-button
        :import-api="importApi + resourceGroupId"
        :get-list="resourceDetail"
        is-diy
        @onComplate="handleClose">
        <el-button type="primary" style="height:32px;" size="small">开始上传</el-button>
      </import-button>
      <el-button class="cancel-btn-style" style="height:32px;" size="small" @click="handleClose">再想想</el-button>
    </div>
  </el-dialog>
</template>
<script>
import ImportButton from '@/components/ImportButton';
import { mapState } from 'vuex';
export default {
  components: { ImportButton },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    resourceDetail: {
      type: Function,
      default: null
    },
    resourceGroupId: { // 资源组id
      type: Number,
      default: null
    }
  },
  data() {
    return {
      importApi: 'admin/supplier/resource/import/'
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    handleClose() {
      this.$emit('closeDialog', false);
    }
  }
};
</script>
<style lang="scss" scoped>
.batch-dialog {
  .content {
    font-size: 20px;
    color: #333;
    font-weight: 700;
    margin-top: 30px;
  }
  .dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
  }
}
</style>
